import React, {Component} from 'react'
import {connect} from 'react-redux'
import {CouponList} from '../../components/Coupon'
import Style from './index.scss'
import {useCoupon} from '../../actions/comfirmOrderAction'
import {getCouponList} from '../../actions/couponAction'
import PageBar from '../../components/common/pageBar';
import AlipayJSOperation from '../../utils/alipayJSOperation';

class Coupons extends Component {
    constructor(props) {
        super(props);
        this.chooseCouponAndGoBack = this.chooseCouponAndGoBack.bind(this);
        this.getData = this.getData.bind(this);
        this.state = {
            discount: 0,
            couponIndex: -2//序号从-1开始，默认不选中任何项
        }
    }

    //获取默认选中项
    getSelectIndxById(list,id){
        let selectIndex=-1;
        if(id) {
            for (var i = 0; i < list.length; i++) {
                if (list[i].couponId == id) {
                    selectIndex = i;
                    break
                }
            }
        }
        return selectIndex;
    }

    //返回选择的优惠券信息
    getData(data) {
        this.setState({
            discount: data.couponAmount != undefined ? data.couponAmount : 0,
            couponIndex: data.index != undefined ? data.index : -1
        });
        /* console.log("返回选择的优惠券信息:", data);*/
    }

    componentWillMount() {
        document.querySelector("title").innerHTML = "选择优惠券";
    }

    componentDidMount() {
        //隐藏标题栏右键
        AlipayJSOperation.setRightButtonStatus(false);
        //设置标题
        AlipayJSOperation.setTitle('选择优惠券');
        //设置标题颜色
        AlipayJSOperation.setBarColor('#2FB3FE');
        this.props.dispatch(getCouponList({orderStr: this.props.couponApiData},()=>{
            let index=this.getSelectIndxById(this.props.couponList,this.props.params.couponId);
            this.setState({
                couponIndex:index//初始选中项
            });
        }));
    }

    componentWillUnmount() {

    }

    //选择优惠券并返回
    chooseCouponAndGoBack(data) {
        this.getData(data);
        setTimeout(() => {
            this.props.dispatch(useCoupon({
                discount: data.couponAmount != undefined ? data.couponAmount : 0,
                couponIndex: data.index != undefined ? data.index : -1,
                couponId: data.index != undefined ? this.props.couponList[data.index].couponId : ''
            }));
        }, 0);
        history.back();
    }

    cancelAndGoBack() {
        this.props.dispatch(useCoupon({discount: 0, couponIndex: -1, couponId: ''}));
        history.back();
    }

    render() {
        return (
            <div className={Style.allContainer}>
                <PageBar title="选择优惠券"/>
                <div className={Style.couponContainer}>
                    <div className={Style.couponContent}>
                        <div className={Style.topTitle}>有
                            <span>{this.props.couponList ? this.props.couponList.length : 0}</span> 张优惠券可用
                        </div>
                        <CouponList list={this.props.couponList} index={this.state.couponIndex}
                                    onClick={(data) => this.chooseCouponAndGoBack(data)}/>
                        <div className={Style.unUse + ' ' + (this.state.couponIndex && this.state.couponIndex == -1 && this.state.couponIndex == -1 ? Style.unUserSelect : '')}
                            onClick={() => this.cancelAndGoBack()}>不使用优惠券
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return Object.assign({}, state.coupon, {couponApiData: state.comfirmOrder.orderInfo.allDataForCoupon});
}


Coupons.defaultProps = {};

export default connect(mapStateToProps)(Coupons)
